<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="金西振">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /* margin-top: 200px;
            padding: 1px; */
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">

        </div>
    </div>
<script>
    /*
        addEventListener(eventType, callback, useCapture);
        1、eventType: 是事件类型
        2、callback: 触发事件时执行的函数
        3、useCapture: 是布尔类型，指定事件是在捕获阶段执行，还是在冒泡阶段执行
            useCapture值为true的时候，是捕获阶段
            useCapture值为false的时候，是冒泡阶段

        事件捕获：事件由祖先元素向子元素传递：类似石子从水面向水底下沉
        事件冒泡：事件由子元素向祖先元素传递：类似气泡从水底向水面上浮

        事件捕获：也叫 事件挖洞

        某个元素触发某个事件，最先得到通知的是window对象，然后是document，依次而入，直至找到真正触发这个事件的元素(目标元素)为止，这个过程就是捕获。接下来，事件会从目标元素开始起泡，再依次而出，直至window对象为止，这个过程就是冒泡

    */ 
    var box = document.querySelector('.box');
    var inner = document.querySelector('.inner');

    
    window.addEventListener('click', function(){alert('window 捕获');}, true);
    window.addEventListener('click', function(){alert('window 冒泡');}, false);

    document.addEventListener('click', function(){alert('document 捕获');}, true);
    document.addEventListener('click', function(){alert('document 冒泡');}, false);

    // document.documentElement.addEventListener('click', function(){alert('html 捕获');}, true);
    // document.documentElement.addEventListener('click', function(){alert('html 冒泡');}, false);

    // document.body.addEventListener('click', function(){alert('body 捕获');}, true);
    // document.body.addEventListener('click', function(){alert('body 冒泡');}, false);

    // box.addEventListener('click', function(){alert('box 捕获');}, true);
    // box.addEventListener('click', function(){alert('box 冒泡');}, false);

    // inner.addEventListener('click', function(){alert('inner 捕获');}, true);
    // inner.addEventListener('click', function(){alert('inner 冒泡');}, false);


    // 不加false的时候，是等待冒泡结束之后，触发
    // box.addEventListener('click', function(){
    //     alert('box click');
    // });
    // inner.addEventListener('click', function(){
    //     alert('inner click');
    // });

    // 通过onclick 添加的事件最终是在冒泡阶段触发
    box.onclick = function(){
        alert('box click');
    }
    inner.onclick = function(){
        alert('inner click');
    }


</script>
</body>
</html>